<template>
  <div class="macroData"  v-wechat-title="this.title">
    <div class="macroData-top">
      <div class="top"></div>
      <a-collapse  v-model="activeKey" >
        <template v-slot:expandIcon="props" >
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel header="大类资产" key="1" >
          <div class="macroData-left" >
               <echartsUtil  :id="'1'" v-loading="ishushen" :data="hushenOption" style="height:200px;"></echartsUtil>

               <echartsUtil :id="'2'" v-loading="iswind"  :data="windOption" style="height:200px" ></echartsUtil>
          </div>

          <div class="macroData-right" >
              <echartsUtil :id="'3'" v-loading="isgov"  :data="govOption" style="height:200px"></echartsUtil>

              <echartsUtil :id="'4'" v-loading="iscash"  :data="cashOption" style="height:200px"></echartsUtil>
          </div>
        </a-collapse-panel>
        </a-collapse>
        <div class="kg"></div>
        <a-collapse  v-model="activeKey" >
          <template v-slot:expandIcon="props" >
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>
        <a-collapse-panel header="宏观经济指标" key="2"  >
          <div class="macroData-left">
             <echartsUtil :id="'5'" :data="GDPOption" style="height:200px;"></echartsUtil>
             <echartsUtil :id="'6'" :data="CPIOption" style="height:200px;"></echartsUtil>
          </div>

          <div class="macroData-right">
            <echartsUtil :id="'7'" :data="PPIOption" style="height:200px;"></echartsUtil>

          </div>

        </a-collapse-panel>
      </a-collapse>

    </div>

  </div>



</template>

<script>
import '@/style/macroData.css'
import moment from 'moment';
import echartsUtil from '@/echartsUtil/echartsUtil'
import {oneOption,twoOption} from '@/echartsUtil/echartsOptions'
  export default {
    components : {
      echartsUtil
    },
    data() {
      return {
        title:'资产配置服务-宏观数据',
        moment,
        activeKey:[1,2],
        hushenOption:{},
        windOption:{},
        govOption:{},
        cashOption:{},
        GDPOption:{},
        CPIOption:{},
        PPIOption:{},
        hushendate:[],
        winddate:[],
        govdate:[],
        cashdate:[],
        ishushen:true,
        iswind:true,
        isgov:true,
        iscash:true,
        GDPhdate:[],
        CPIdate:[],
        PPIdate:[],
    }
  },
    created(){
      this.loadData();
    },


    methods:{
      loadData(){
        let that = this;
        let name1="当月同比_估测值";
        let name2="当月同比_实际值";
        let hushentext = "沪深300";
        let windtext = "wind商品";
        let govtext = "国债全收益";
        let cashtext = "3个月定存利率";
            //大类资产数据

          //宏沪深300
          that.$http.get(that.$url.macroUrl+"/hushen/20030101/"+moment().format("YYYYMMDD")).then(res=>{
            //初始化生成折线图的数据
            that.hushendate=res.hushen;
            if(that.hushendate != null && that.hushendate.length >0){
                this.ishushen=false;
                that.hushenOption = oneOption(hushentext,that.assetsData(that.hushendate));
            }else {
              this.ishushen=true;
            }
          });
          //wind商品
          that.$http.get(that.$url.macroUrl+"/wind/20030101/"+moment().format("YYYYMMDD")).then(res=>{
              that.winddate=res.wind;
              if(that.winddate != null && that.winddate.length>0){
                this.iswind=false
                that.windOption = oneOption(windtext,that.assetsData(that.winddate));
              }else {
                this.iswind=true;
              }
          });
          //国债全收益
          that.$http.get(that.$url.macroUrl+"/gov/20030101/"+moment().format("YYYYMMDD")).then(res=>{
              that.govdate=res.gov;
              if(that.govdate != null && that.govdate.length>0){
                this.isgov=false
                that.govOption = oneOption(govtext,that.assetsData(that.govdate));
              }else {
                this.isgov=true;
              }
          });
          //3个月定存利率
          that.$http.get(that.$url.macroUrl+"/threeMonth/20030101/"+moment().format("YYYYMMDD")).then(res=>{
              that.cashdate=res.cash;
              if(that.cashdate != null && that.cashdate.length>0){
                this.iscash=false
                that.cashOption = oneOption(cashtext,that.assetsData(that.cashdate));
              }else {
                this.iscash=true;
              }
          });

        //宏观指标GDP数据
        that.$http.get(that.$url.macroIndexUrl+"/1").then(res=>{
          //初始化生成折线图的数据
          that.GDPdate=res.reverse();
          var startValue = moment(res.slice(-1)[0].ecoDate).subtract(3, "years").format("YYYY/MM/DD");
          var endValue = moment(res.slice(-1)[0].ecoDate).format("YYYY/MM/DD");
          let GDPtext="GDP";
          that.GDPOption = twoOption(GDPtext,that.macroscopicData(that.GDPdate),name1,name2,startValue,endValue,"(%)");
        });
        //宏观指标CPI数据
        that.$http.get(that.$url.macroIndexUrl+"/2").then(res=>{
          //初始化生成折线图的数据
          that.CPIdate=res.reverse();
          let startValue = moment(res.slice(-1)[0].ecoDate).subtract(3, "years").format("YYYY/MM/DD");
          var endValue = moment(res.slice(-1)[0].ecoDate).format("YYYY/MM/DD");

          let CPItext="CPI";
          that.CPIOption = twoOption(CPItext,that.macroscopicData(that.CPIdate),name1,name2,startValue,endValue,"(%)");
        });
        //宏观指标PPI数据
        that.$http.get(that.$url.macroIndexUrl+"/3").then(res=>{
          //初始化生成折线图的数据
          that.PPIdate=res.reverse();
          let startValue = moment(res.slice(-1)[0].ecoDate).subtract(3, "years").format("YYYY/MM/DD");
          var endValue = moment(res.slice(-1)[0].ecoDate).format("YYYY/MM/DD");
          let PPItext="PPI";
          that.PPIOption = twoOption(PPItext,that.macroscopicData(that.PPIdate),name1,name2,startValue,endValue,"(%)");

        });
      },
      //大类资产数据分析
      assetsData(dataSource){
        let dateMap=[];
        let blueMap=[];
        let redMap=[];
          dataSource.map((item,index)=>{
           dateMap.push(moment(item.date).format('YYYY/MM/DD'));  //时间map
           blueMap.push(Number(item.closingPrice).toFixed(2));  //蓝色折线map
       });
       let data={
         dateMap:dateMap,
         blueMap:blueMap,
       };

       return data;
     },

     //宏观数据分析
     macroscopicData(dataSource){
       let dateMap=[];
       let blueMap=[];
       let redMap=[];
       let blues=[];//记录不为空数组
       let reds=[];
         dataSource.map((item,index)=>{
          dateMap.push(moment(item.ecoDate).format('YYYY/MM/DD'));  //时间map
          if(item.dataType==0){
            blueMap.push(item.dataValue);//蓝色折线map  估测值
            blues.push(item.dataValue);
            redMap.push("");

          }
          else{
            blueMap.push("");
            redMap.push(item.dataValue);  //红色折线map    实际值
            reds.push(item.dataValue);
          }
      });
      //redMap.unshift(
      let val = redMap[redMap.length-blues.length-1];
      blueMap.splice(reds.length-1,1,val);
      let data={
        dateMap:dateMap,
        blueMap:blueMap,
        redMap:redMap
      };
      return data;
    },

  }
}
</script>
<style >
.macroData-top .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{


  left:98%;
}
 .macroData-top /deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header{
   padding-left:20px;
 }

</style>
